<template>
  <div>
    <common-head title="增加联系人" />
    <van-form @submit="onSubmit">
      <van-cell-group><!-- rules 验证 -->
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
          ]"
          v-model="contact.linkMan"
          label="姓名"
        />
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
            {
              pattern: /\d{11}/,
              message: '请输入正确的手机号'
            }
          ]"
          v-model="contact.mobile"
          type="tel"
          label="手机号"
        />
        
        <van-cell title="地区" is-link :value="region" @click="showArea" />
        <van-field
          :rules="[
            {
              required: true,
              message: '联系人必传',
            },
          ]"
          v-model="contact.address"
          label="详细地址"
        />
        <van-field v-model="contact.code" type="number" label="邮政 编码" />
        <van-cell center title="设置默认地址">
          <template #right-icon>
            <van-switch v-model="contact.isDefault" size="24" />
          </template>
        </van-cell>
      </van-cell-group>
      <van-button
        type="primary"
        native-type="submit"
        style="margin-top: 20px"
        size="large"
        >确认</van-button
      >
    </van-form>
    <!-- 省市区弹出层 -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area title="标题" :area-list="areaList" @confirm="choseArea" />
    </van-popup>
    <!-- /省市区弹出层  -->
  </div>
</template>

<script>
import CommonHead from "_components/CommonHead";
import { areaList } from '@vant/area-data'
import { addContact } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
export default {
  data() {
    return {
      contact:{
       linkMan: '', // 联系人
        mobile: '', // 手机号
        address: '',//详细地址
        provinceId: '',//省份编码
        cityId: '',//城市编码
        isDefault: false,//默认地址
        code: '',//邮编
        districtId: '',//区编码
      },
      show:true,
      areaList:areaList,
      region:'省/市/区'

    }
  },
  methods: {
  onSubmit(){
       addContact({
        ...this.contact,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast({
            type: 'success',
            message: '增加联系人成功',
            duration: 1000,
            onClose: () => {
              this.$router.go(-1)
            }
          })
        }
      })
    },
    showArea(){//点击地区显示
      this.show=true
    },
    choseArea(area){//点击省市区三级联动确认
     /*  console.log(area); */
       this.contact.provinceId = area[0].code
      this.contact.cityId = area[1].code
      this.contact.districtId = area[2].code
      this.region = area[0].name + '/' + area[1].name + '/' + area[2].name   //拼接确认到上面地区
      this.show = false
    }
  },
  components: {
    CommonHead,
  },
};
</script>

<style lang="scss" scoped>
.van-cell::after {
  border-bottom: 0.025rem solid rgb(218, 215, 215);
}

</style>